<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
    <script src="./lib/three/dat.gui.js"></script>
    <script src="./controls/index.js"></script>
</head>
<body>
    <script>
        // 创建3D场景对象Scene
        const scene = new THREE.Scene();

        const width = window.innerWidth;
        const height = window.innerHeight;
        // 实例化一个透视投影相机对象
        const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
          //相机在Three.js三维坐标系中的位置
        // 根据需要设置相机位置具体值
         camera.position.set(0,0,20);
         // 创建渲染器对象Renderer
         const renderer = new THREE.WebGLRenderer();
         // 设置渲染器的尺寸
        renderer.setSize(width,height);
        // 将渲染器中的内容添加到body中
        document.body.appendChild(renderer.domElement);

        //创建一个长方体几何对象Geometry
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建一个材质对象Material
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color:0xff0000,
            wireframe:false,
        });
        // 创建一个网格模型对象Mesh
        const cube =  new THREE.Mesh(cubeGeometry,cubeMaterial);
        scene.add(cube);

        //添加一个球体
        const sphereGeometry = new THREE.SphereGeometry(1,20,50);
        const sphereMaterial = new THREE.MeshLambertMaterial({
            color:0x00ff00,
            wireframe:false,
        });
        const sphere =  new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.position.set(3,1,0);
        scene.add(sphere);

        //添加一个平面 接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20,30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color:0x999999
        });
        const plane =  new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotateZ(20);
        plane.position.set(3,0,-10);
        scene.add(plane);

        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 10, 70);
    
        scene.add(spotLight);
         // AxesHelper：辅助观察的坐标系
        const axisHelper = new THREE.AxisHelper( 80 );
        scene.add(axisHelper);

         sphere.castShadow = true;
         cube.castShadow = true;
         plane.receiveShadow = true;
         spotLight.castShadow = true;
         renderer.shadowMapEnabled = true;

        initControls(spotLight)
        const animation = ()=>{
            cube.rotation.x +=0.01;
            cube.rotation.y +=0.01;
            // sphere.rotation.x +=0.01;
            // sphere.rotation.y +=0.01;
             // 使用渲染器，通过相机将场景渲染进来
            renderer.render(scene,camera);
            requestAnimationFrame(animation);
        }
        animation()
    </script>
</body>
</html>